<template>
  <div id="app">
      <div class="box">
          <input type="text" placeholder="搜索 歌手 歌曲 专辑">
          <div></div>
      </div>
      <div class="btn">
          <span>热门搜索</span>
          <div>
              <button>薛之谦</button>
              <button>突然想起你</button>
              <button>世界末日的前一天</button>
          </div>
          <div>
              <button>黑夜白问天</button>
              <button>张杰</button>
              <button>删了吧</button>
              <button>漠河舞厅</button>
          </div>
          <div>
              <button>金玉良缘</button>
              <button>芳华</button>
              <button>起风了</button>
             
          </div>
      </div>
  </div>
</template>
<script>
export default {
  name: "Ss",
  components: {},
  data() {
    return {};
  },
};
</script>
<style scoped>
    .box{
        width: 3.75rem;
    }
    .btn span{
        margin-left: 0.2rem;
        font-size: 0.14rem;
        color: rgb(116, 111, 111);
    }
    input{
        background: rgb(248, 247, 247);
        display: inline-block;
        margin: 0.2rem 0 0 0.5rem ;
        text-align: center;
        width: 2.7rem;
        border: 1px solid #ccc;
        height: 0.3rem;
        border-radius: 1rem;
        
    }
    .box div{
        margin: 0.2rem 0 0.2rem 0;
        border: 1px solid rgb(246, 245, 245);
        border-radius: 10%;
       
    }
    .btn button{
        margin: 0.07rem;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 1rem;
    }
</style>